<script setup>
import { ref, onMounted } from 'vue'
import { usePaintingStore } from "@/store";
import { imgToImageUploadRefImg } from "@/api/painting";

// import caricature from '@/assets/imgs/pages/painting/复古漫画.png'
// import fairyTale from '@/assets/imgs/pages/painting/3D童话.png'
// import twoDimension from '@/assets/imgs/pages/painting/二次元.png'
// import smallDistinct from '@/assets/imgs/pages/painting/小清晰.png'
// import science from '@/assets/imgs/pages/painting/未来科技.png'
// import cartoon from '@/assets/imgs/pages/painting/炫彩卡通.png'
// import countryStyle from '@/assets/imgs/pages/painting/清雅国风.png'
// import newYear from '@/assets/imgs/pages/painting/喜迎新年.png'


const props = defineProps({
  item: Object
})

const paintingStore = usePaintingStore();
const pictureCreateImageObj = paintingStore.pictureCreateImageObj;
const oneActive = ref(0); // 场景生成&自定义生成tab选择
const active = ref(0); // 二级tab选择
const tabsList = ref([]); // 二级tab数组
const styleList = ref([
  { id: 0, label: '复古漫画', },
  { id: 1, label: '3D童话', },
  { id: 2, label: '二次元', },
  { id: 3, label: '小清晰', },
  { id: 4, label: '未来科技', },
  { id: 7, label: '炫彩卡通', },
  { id: 8, label: '清雅国风', },
  { id: 9, label: '喜迎新年', },

])


const imgToImageUploadRefImgFn = async (refImgFile) => {
  let res = await imgToImageUploadRefImg(refImgFile, { preRefImgUrl: refImgFile })
  // res = JSON.parse(res.data)
  pictureCreateImageObj.styleRefUrl = res.data.refImgUrl;
}



// 切换一级tab
const oneActiveFn = (id) => {

  if (id === 0) {
    pictureCreateImageObj.styleRefUrl = ''
    pictureCreateImageObj.style = 0
  } else {
    pictureCreateImageObj.style = -1
  }
  oneActive.value = id
}

const activeFn = (id) => {
  pictureCreateImageObj.style = id
}

const uploadImgFn = () => {
  uni.chooseMedia({
    count: 1,
    mediaType: "image",
    async success(res) {
      imgToImageUploadRefImgFn(res.tempFiles[0].tempFilePath)
      return
      const result = await paintingStore.imageUploadFile({
        tempFilePath: res.tempFiles[0].tempFilePath,
        formData: {
          type: 5,
          preImgUrl: pictureCreateImageObj.styleRefUrl,
        },
      });
      pictureCreateImageObj.styleRefUrl = result;
    },
  });
};
</script>

<template>
  <div class="tabs">
    <div class="navTab">
      <div class="tab" :class="{ active: oneActive === 0 }" @click="oneActiveFn(0)">
        风格选择
      </div>
      <div class="tab" :class="{ active: oneActive === 1 }" @click="oneActiveFn(1)">
        自定义风格
      </div>
    </div>
    <div class="twoTabs">
      <div v-if="oneActive === 0">
        <div class="style-box">
          <div class="style-box-item" v-for="i of styleList" :class="{ active: pictureCreateImageObj.style === i.id }"
            @click="activeFn(i.id)">
            <img class="style-img" :src="`https://www.topyunliu.com/imgs/paint/style/${i.label}.png`" mode="aspectFill" />
            <p class="style-text">{{ i.label }}</p>
          </div>
        </div>
      </div>
      <div class="itemBox" v-else>
        <div class="titleBox">
          <div class="leftBox">
            <i class="leftIcon"></i>
            <p class="title">上传风景参考图
              <span>AI会在参考图基础上,进行绘图</span>
            </p>
          </div>
        </div>
        <!-- 图片上传 -->
        <div class="uploadImg" @click="uploadImgFn">
          <img :src="pictureCreateImageObj.styleRefUrl" v-if="pictureCreateImageObj.styleRefUrl" mode="aspectFill" />
          <van-icon name="plus" v-else></van-icon>
          <div class="delIcon_box" v-if="pictureCreateImageObj.styleRefUrl"
            @click.stop="pictureCreateImageObj.styleRefUrl = ''">
            <div class="delIcon">
              <i class="iconfont ai-icon-shanchutupian"></i>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tabs {
  margin: 40rpx 0;

  .navTab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    .tab {
      width: 335rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 32rpx;
      font-size: 30rpx;
      letter-spacing: 1px;
      text-align: center;
      color: var(--a-three-text-color);
      font-weight: bold;
      border: 2rpx solid transparent;
    }

    >.active {
      border: 2rpx solid var(--a-main-color);
      color: var(--a-main-color);
    }
  }

  .twoTabs {
    .style-box {
      display: grid;
      grid-template-rows: repeat(2, 220rpx);
      grid-template-columns: repeat(auto-fill, 160rpx);
      grid-column-gap: 17rpx;
      grid-row-gap: 17rpx;
      overflow-x: auto;
      margin-top: 16rpx;


      &::-webkit-scrollbar {
        display: none;
      }

      .style-box-item {
        width: 170rpx;
        height: 214rpx;

        .style-img {
          display: block;
          border: 4rpx solid transparent;

          width: 154rpx;
          height: 154rpx;
          object-fit: contain;
          margin-bottom: 12rpx;
          border-radius: 30rpx;
        }

        .style-text {
          font-size: 24rpx;
          text-align: center;
          color: var(--a-one-text-color);
        }
      }

      .active {
        .style-img {
          border: 4rpx solid var(--a-main-color);
        }

        .style-text {
          color: var(--a-main-color);
        }
      }
    }

    .gird {
      grid-auto-flow: column;
    }

    .noTowRows {
      grid-template-rows: repeat(1, 210rpx);
    }

    .itemBox {

      // 一级标题类
      .titleBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20rpx 0 22rpx;

        .leftBox {
          display: flex;
          align-items: center;

          .leftIcon {
            width: 12rpx;
            height: 18rpx;
            background: var(--a-main-color);
            border-radius: 6rpx;
            margin-right: 10rpx;
          }

          .title {
            font-size: 28rpx;
            color: var(--a-one-text-color);

            label {
              font-weight: 400;
              font-size: 24rpx;
            }
          }
        }

        .rightBox {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 350rpx;

          .right {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: var(--a-three-text-color);

            .iconfont {
              margin-right: 6rpx;
            }

            &:first-child {
              margin-right: 20rpx;
            }
          }
        }
      }

      // 背景参考图上传类
      .uploadImg {
        width: 160rpx;
        height: 160rpx;
        font-size: 48rpx;
        line-height: 160rpx;
        border-radius: 24rpx;
        overflow: hidden;
        text-align: center;
        color: var(--a-main-color);
        background: var(--a-main-box-bg-color);
        position: relative;

        image {
          width: 160rpx;
          height: 160rpx;
        }

        .delIcon_box {
          position: absolute;
          top: 0;
          right: 0;
          width: 60rpx;
          height: 60rpx;

          .delIcon {
            position: absolute;
            top: 0;
            right: 0;
            width: 40rpx;
            height: 40rpx;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 0 0 24rpx;
            box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.3);

            .iconfont {
              font-size: 24rpx;
              color: #fff;
            }
          }
        }
      }


    }
  }
}
</style>
